<template>
	<view class="changeAlphabet" >
		<view class="list" >
			<view 
			class="item"
			v-for="(value,index) in city" 
			:key="index"
			hover-class="hover"
			@click="getAlphabet(value.title)"
			@touchstart="touchStart"
			@touchmove="touchMove"
			@touchend="touchEnd"
			>
				{{value.title}}
			</view>
		</view>
	</view>
</template>

<script>
	let timer = null;
	export default {
		props:['city'],
		name:"changeAlphabet",
		data() {
			return {
				touch:false,//触摸状态
			};
		},
		methods:{
			getAlphabet(alphabet){
				// console.log(alphabet);
				this.$emit('change',alphabet);
			},
			touchStart(){
				this.touch=true;
			},
			touchMove(e){
				clearTimeout(timer);
				timer=setTimeout(()=>{
					if(this.touch){
						const touchY=e.changedTouches[0].pageY-150;
						const index = Math.floor(touchY/15);
						if(index>0&&index<this.city.length){
							this.$emit('change',this.city[index].title);
						}
					}
				},30)
				
			},
			touchEnd(){
				this.touch=false;
			}
			
		}
	}
</script>

<style>
.changeAlphabet{
	position:fixed;
	right: 5px;
	top:150px;
	z-index: 20;
}
.list{
	width:16px;
}
.item{
	color: #fff;
	text-align: center;
	height:18px;
	line-height: 15px;
	font-size: 12px;
}
.hover{
	color: #fff;
	text-align: center;
	height:18px;
	line-height: 18px;
	font-size: 18px;
}
</style>
